<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>訂單支付結果</title>
    <style>
        .body{
            width:100%;
            height: 100%;
            text-align:center
        }
        .img{
            width:300px;
            height: 300px;
            margin-top: 40%;
        }
        .msg{
            font-size: 80px;
            margin-top: 100px;
            color: #f8712f;
        }
        .returns{
            font-size: 38px;
            margin-top: 100px;
            color: #f8712f;
        }
        .btn{
            display:block;
            padding: 20px 20px;
            font-size: 60px;
            margin-top: 100px;
            color: #ffffff;
            background-color: #f8712f;
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div class="body">
    <img src="https://brain-storm.oss-cn-hongkong.aliyuncs.com/2021-08-20/1629428242.jpg" alt="" class="img">
    <div class="msg">支付失敗</div>
    <div class="returns" id="returns">3秒後自動返回APP，若沒反應，請點擊按鈕返回</div>
    <a class="btn" onclick="returnApp()">點擊返回</a>
</div>


<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
    document.addEventListener('UniAppJSBridgeReady', function() {
        var returns = document.getElementById('returns');
        var time = 3;
        var timeId = setInterval(function () {
            var text = time + '秒後自動返回APP，若沒反應，請點擊按鈕返回';
            returns.innerText = text;
            time--;
            if(time == 0){
                clearInterval(timeId);
                returnApp();
            }
        }, 1000);

    });
    function returnApp() {
        uni.postMessage({
                data: {
                    payStatus: 'false'
                }
            });
        }
</script>
</body>
</html>
